<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{margin: 0 auto;background: #ccc;position: relative;}
        .cont::after{content: "";display: block;clear: both;}

        .box{float: left;padding: 6px;}

        .imgbox{border: solid 1px black;padding: 6px;border-radius: 6px;}
        
        .imgbox img{width: 200px;display: block;}
    </style>
    <script>
        // OOA：瀑布流布局：从第二行开始，每个元素的顺序和页面上的顺序不是对应，根据上一行哪个元素的高度最小，给他下面放个元素
            // 1选择元素
            // 2补全布局：让大框居中（计算一行最多能放几个，再计算的最大框的宽度）
            // 3根据一行最多能放几个元素，区分第一行和其他行
            // 4获取第一行元素所有的高度
            // 5给其他行元素设置定位
            // 6计算最小值和最小值所在的位置（索引）
            // 7将最小值设置为下一个元素的top
            // 8将最小值的索引*任意一个元素的宽度，设置给下一个元素的left
            // 9修改原最小值数据：加上当前放置在下面的元素的高度
            // 10重复执行6~~~

        // OOD
            // class Waterfall{
            //     constructor(){
            //         // 1.选择元素
            //         // 2.补全布局
            //         this.init();
            //     }
            //     init(){
            //         // 计算一行最多能放几个，再计算最大宽度
            //         // 3. 区分第一行
            //         this.firstLine()
            //         // 4. 区分其他行
            //         this.otherLine();
            //     }
            //     firstLine(){
            //         // 5. 获取所有元素的高度，存起来
            //     }
            //     otherLine(){
            //         // 6. 拿到第一行所有的高度，计算最小值和最小值的索引
            //         // 7. 设置元素的定位
            //         // 8. 设置元素的top和left
            //         // 9. 修改最小值
            //     }
            // }

        // OOP
        onload = function(){
            new Waterfall;
        }
        
        class Waterfall{
            constructor(){
                // 1.选择元素
                this.box = document.querySelectorAll(".box");
                this.cont = document.querySelector(".cont");

                this.heightArr = [];

                // 2.补全布局
                this.init();
            }
            init(){
                // 计算一行最多能放几个，再计算最大宽度
                this.clientW = document.documentElement.clientWidth;
                this.boxW = this.box[0].offsetWidth;
                this.maxNum = parseInt(this.clientW / this.boxW)
                this.cont.style.width = this.boxW * this.maxNum + "px";

                // 3. 区分第一行
                this.firstLine()
                // 4. 区分其他行
                this.otherLine();
            }
            firstLine(){
                // 5. 获取所有元素的高度，存起来
                for(var i=0;i<this.maxNum;i++){
                    this.heightArr.push(this.box[i].offsetHeight);
                }
            }
            otherLine(){
                for(var i=this.maxNum;i<this.box.length;i++){
                    // 6. 拿到第一行所有的高度
                    // console.log(this.heightArr)
                    // 计算最小值和最小值的索引
                    // var min = getMin(this.heightArr);
                    // var min = Math.min.apply(null,this.heightArr);
                    var min = Math.min(...this.heightArr);
                    var minIndex = this.heightArr.indexOf(min);
                    // console.log(minIndex);
                    // 7. 设置元素的定位
                    this.box[i].style.position = "absolute";
                    // 8. 设置元素的top和left
                    this.box[i].style.top = min + "px";
                    this.box[i].style.left = minIndex * this.boxW + "px";
                    // 9. 修改最小值
                    this.heightArr[minIndex] += this.box[i].offsetHeight;
                }
            }
        }




        function getMin(arr){
            // 先对数组进行截取（为了深拷贝）
            // 然后对截取出的新数组排序
            // 找第0位
            // 返回出去
            return arr.slice(0).sort((a,b)=>a-b)[0];
        }
        
    </script>
</head>
<body>
    <div class="cont">
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>